<template>
  <el-dialog title="新生报到登记" :visible.sync="dialogTableVisible" width="80%" @open="openDialog()"
             @close="closeDialog">
    <el-form ref="form" :model="form" label-width="140px">


      <h2  >2023年新生报到</h2>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
          <span>{{form.name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报到日期">
            <span>{{formatDate(new Date())}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别">
            <span v-if="form.sex==='1'">男</span>
            <span v-if="form.sex==='2'">女</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            {{form.idCard}}
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="录取学院">
            <span>{{ form.enrollInstitute }}</span>
<!--            <el-select v-model="form.instituteCode" @change="changeInstituteCode()" style="width: 100%">
              <el-option
                  v-for="(value, key) in collegeData"
                  :key="key"
                  :label="value"
                  :value="key"
              ></el-option>
            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="录取专业">
            <span>{{ form.enrollInstitute }}</span>
<!--            <el-select v-model="form.specialtyCode" @change="changeMajor()" style="width: 100%">
              <el-option
                  v-for="dict in collegeList"
                  :key="dict.specialtyCode"
                  :label="dict.major"
                  :value="dict.specialtyCode"
              ></el-option>
            </el-select>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家庭住址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="家长姓名">
            <el-input v-model="form.parentName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="与考生关系">
            <el-input v-model="form.relation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家长电话">
            <el-input v-model="form.parentPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <h2  >报到登记</h2>
      <el-divider></el-divider>

      <el-row>
        <el-col :span="12">
          <el-form-item label="报到登记">
            <el-select v-model="form.register" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="dict in options1"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="form.registerRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <h2  >缴费</h2>
      <el-divider></el-divider>


      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费情况">
            <el-select v-model="form.total" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="dict in options2"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="form.totalRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="缴费明细选项">
          <el-checkbox-group v-model="selectcost" @change="changeCost">
            <el-checkbox v-for="(ite,index) in costname" :label="costvalus[index]" :key="ite" :disabled="costPage">{{ite}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="提示">
          <span style="margin-right: 20px">应缴学费:{{form.majorCost}}</span>
          <span style="margin-right: 20px">应缴住宿费:1800</span>
          <span style="margin-right: 20px">教材教辅费:1000</span>
          <span style="margin-right: 20px">其他费用: 体检费80、军训服费300、水费150 </span>
        </el-form-item>
      </el-row>
<!--      <el-row>
        <el-col :span="6">
          <el-form-item label="学费">
            <el-input-number v-model="form.tuition" :min="0"  style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应缴学费">
            <span>{{form.majorCost}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="住宿费">
            <el-input-number v-model="form.lodgingCost" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应缴住宿费">
            <span>1800</span>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
        <el-col :span="6">
          <el-form-item label="书本代收费">
            <el-input-number v-model="form.bookCost" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="教材教辅费">
            <span>1000</span>
          </el-form-item>
        </el-col>
        </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="其他费用">
                <el-input-number v-model="form.otherCost" :min="0" style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他费用明细">
                <span>体检费80、军训服费300、水费150</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="合计">
                <span>{{hj}}</span>
              </el-form-item>
            </el-col>
          </el-row>-->

      <h2  >住房安排</h2>
      <el-divider></el-divider>


      <el-row>
        <el-col :span="12">
          <el-form-item label="住宿情况">
            <el-select v-model="form.roomArrange" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="dict in options3"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="12" v-if="this.form.roomArrange==='1'">
          <el-form-item label="房间号">
            <el-input v-model="form.roomId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="this.form.roomArrange==='0'">
          <el-form-item label="备注">
            <el-input v-model="form.roomRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <h2  >上交登记表</h2>
      <el-divider></el-divider>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否已上交登记表">
            <el-select v-model="form.submitRegister" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="dict in options4"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="form.submitRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="warning" @click="onSubmit('0')" :loading =buttonLoading>暂存</el-button>
        <el-button type="primary" @click="onSubmit('1')" :loading =buttonLoading>完成报到</el-button>
        <el-button @click="closeDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
const costOptions = ['学费', '住宿费', '书本费', '其他费用(体检费80、军训服费300、水费150)'];
export default {
  name: "ZsbDialog",
  props: {
    //遮罩层
    isOpen: {
      type: Boolean,
      default: false,
    },

    id: {
      type: Number,
      default: null
    }

  },

  data() {
    return {
      costPage:true,
      costname:costOptions,
      costvalus:['tuition','lodgingCost','bookCost','otherCost'],
      selectcost:[],
      form: {
        specialityCode:null,
      },
      options1: [{
        value: '1',
        label: '已报到',
      },
        {
          value: '0',
          label: '未报到',
        },],
      options2: [
          {
        value: '1',
        label: '已缴费',
      },
        {
          value: '0',
          label: '未缴费',
        },
        {
          value: '2',
          label: '部分缴费',
        },
      ],
      options3: [{
        value: '1',
        label: '已安排',
      },
        {
          value: '0',
          label: '未安排',
        },],
      options4: [{
        value: '1',
        label: '已上交',
      },
        {
          value: '0',
          label: '未上交',
        },],
      collegeData:[],
      collegeList:[],
      originalCollegeList:[],
      yjxf:0,
      buttonLoading:false,
    }

  },

  watch:{
    form:{
      handler(newval){
        if(newval.total=="1"){
          this.costPage = true;
            this.selectcost=this.costvalus
        }
        if(newval.total=="0"){
          this.costPage = true;
          this.selectcost=[]
        }
        if(newval.total=="2"){
          this.costPage = false;

        }
      },
      deep:true
    },
    selectcost:{
      handler(newval){
        this.form.tuition='0'
        this.form.lodgingCost='0'
        this.form.bookCost='0'
        this.form.otherCost='0'
        for (let i = 0; i <newval.length; i++) {
          if(newval[i]=='tuition'){
            this.form.tuition='1'
          }
          if(newval[i]=='lodgingCost'){
            this.form.lodgingCost='1'
          }
          if(newval[i]=='bookCost'){
            this.form.bookCost='1'
          }
          if(newval[i]=='otherCost'){
            this.form.otherCost='1'
          }
        }
        },
        deep:true
    }
    },
  computed: {
    dialogTableVisible: {
      get() {
        return this.isOpen
      },
      set(val) {
        this.$emit('update:isOpen', val)
      },
    },
    hj:{
      get() {
        return this.form.tuition+this.form.lodgingCost+this.form.bookCost+this.form.otherCost
      },
    }
  },
  methods: {
    /*changeCost(){
      for (let i = 0; i < this.selectcost.length; i++) {
        console.log(sele)
      }
    },*/
    onSubmit(status) {
      this.buttonLoading =true
      if(status==='1'){
        this.form.reportDate = new Date()
      }
      this.form.status =status
      this.$axios({
        method: 'post',
        url: this.$httpUrl + '/studata1/updata',
        data: this.form
      }).then((res)=>{
        if(res.data.code===200){
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.buttonLoading =false
          this.closeDialog()
          this.$emit('reload')
        }
      }).finally(() => {
        setTimeout(() => {
          this.buttonLoading =false
        }, 5000); // 5000毫秒等于5秒
      });

    },
    openDialog() {
      this.reset()
      this.$axios({
        method: 'get',
        url: this.$httpUrl + '/speciality/getSpecialityInstituteMap',
      }).then(res=>{
        this.collegeData = res.data.data
      })

      this.$axios({
        method: 'get',
        url: this.$httpUrl + '/speciality/getSpecialityList',
      }).then(res=>{
        this.collegeList = res.data.data
        this.originalCollegeList = [...this.collegeList];
      })

      this.$axios({
        method: 'get',
        url: this.$httpUrl + '/studata1/getById?id=' + this.id,
      }).then(res=>{
        this.form = res.data.data
        this.selectcost=[]
        if(this.form.tuition=='1'){
          this.selectcost.push('tuition')
        }
       if( this.form.lodgingCost=='1'){
         this.selectcost.push('lodgingCost')
       }
        if(this.form.bookCost=='1'){
          this.selectcost.push('bookCost')
        }
        if(this.form.otherCost=='1'){
          this.selectcost.push('otherCost')
        }
      })
    },
    closeDialog() {
      this.dialogTableVisible = false
      this.reset()
      this.$refs.form.resetFields()
    },
    reset() {
      this.form = {
      }
    },
    changeMajor() {
      this.yjxf = null; // 初始化 yjxf 为 null
      this.originalCollegeList.forEach(i => {
        if (i.specialtyCode === this.form.specialtyCode) {
          this.yjxf = i.cost; // 找到匹配的专业代码，将对应的学费赋值给 yjxf
        }
      });
    },
    changeInstituteCode(){
      this.collegeList = this.originalCollegeList.filter(i => i.instituteCode === this.form.instituteCode);
      },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
}
</script>

<style scoped>

</style>